<template>
	<view class="wrap">
		<u-form :model="model" ref="uForm">
			<view class="section">
				<view class="font-size-lg font-weight-bold pt-30"><text class="input-required">*</text>真实姓名<text class="font-size-base text-color-assist ml-10">(需与身份证上的一致)</text></view>
				<u-form-item>
					<u-input readonly="readonly" placeholder="真实姓名" v-model="realName" />
				</u-form-item>
			</view>
			<view class="section">
				<view class="font-size-lg font-weight-bold pb-30"><text class="input-required">*</text>个人作品</view>
				<view class="d-flex justify-content-start">
					<image class="image border-radius-base" @tap.stop="previewMedia(0)" :src="albumPhotos" mode="aspectFill"></image>
				</view>
			</view>
			<view class="section">
				<view class="font-size-lg font-weight-bold pb-30"><text class="input-required">*</text>拍摄人像半身照</view>
				<view class="d-flex justify-content-start">
					<image class="image border-radius-base" @tap.stop="previewMedia(1)" :src="bustPhotos" mode="aspectFill"></image>
				</view>
			</view>
		</u-form>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			realName:'',
			albumPhotos:'',
			bustPhotos:''
		};
	},
	onLoad(options) {
		let that = this;
		this.realName = options.realName;
		
		let albumPhotos = options.albumPhotos;
		this.$f.getObjectUrl(albumPhotos, function(path) {
			that.albumPhotos = path;
		})
		
		let bustPhotos = options.bustPhotos;
		this.$f.getObjectUrl(bustPhotos, function(path) {
			that.bustPhotos = path;
		})
	},
	methods:{
		previewMedia(current) {
			let medias = [];
			
			medias.push({
				url:this.albumPhotos,
				type:'image',
			})
			
			medias.push({
				url:this.bustPhotos,
				type:'image',
			})
			
			uni.previewMedia({
				sources: medias, // 需要预览的资源列表
				current: current // 当前显示的资源序号
			})
		}
	}
};
</script>
<style>
page {
	background-color: #F5F5F5;
}
.wrap {
	padding-bottom: 150rpx;
}
.section {
	background-color: #FFFFFF;
	padding: 30rpx 30rpx;
	margin-top: 20rpx;
}

.images {
	width: 200rpx;
	height: 200rpx;
}
</style>

